<template>
  <div class="userList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="userSearch">
      <el-form-item label="用户名称">
        <el-input v-model="userSearch.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="queryUserList">查询</el-button>
        <el-button type="primary" icon="plus" @click="showAddUserPanel">添加用户</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="userList" stripe style="width: 100%;">
      <el-table-column prop="userName" align="center" label="用户名称"></el-table-column>
      <el-table-column prop="loginName" align="center" label="登录用户名"></el-table-column>
      <el-table-column prop="tel" align="center" label="电话号码"></el-table-column>
      <el-table-column align="center" label="状态" width="120">
        <template scope="scope">
          <el-tag type="success" v-if="scope.row.status == 'VALID'">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 'INVALID'">停用</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 'DELETED'">删除</el-tag>
        </template >
      </el-table-column>
      <el-table-column align="center" width="350" label="操作">
        <template scope="scope">
          <el-button type="warning" @click="userStatusChange(scope.row)" icon="setting" size="small">{{scope.row.status == 'VALID' ?'停用' :'启用'}}</el-button>
          <el-button type="primary" @click="showModifyUserPanel(scope.row)" icon="setting" size="small">编辑</el-button>
          <el-button type="primary" @click="userRoleInfo(scope.row.userId)" icon="setting" size="small">角色信息</el-button>
          <el-button type="danger" v-if="scope.row.status != 'DELETED'" @click="delUser(scope.row.userId)" icon="delete" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class='pagination' @size-change="chagePageSize" @current-change="changePageNum" :current-page="userSearch.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="userSearch.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="userTotal"></el-pagination>
    <el-dialog :title="userTitle" v-model="isUser" class="user-diaolog">
      <user :user="user" :state="userState" :isUser="isUser"></user>
    </el-dialog>
    <el-dialog title="用户角色信息" v-model="isRole">
      <el-form label-width="120px">
        <el-form-item label="角色列表">
          <template scope="scope">
            <el-checkbox v-for="(role, $index) in roleList" :key="1" v-model="roleCheckList" :label="role.roleId">
              <span>{{role.roleName}}</span>
            </el-checkbox>
          </template>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="updateUserRole">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import user from './user/user'
  export default {
    name: "userList",
    data() {
      return {
        userSearch: {
          name: '',
          pageNum: 1,
          pageSize: 10
        },
        userTotal: 0,
        userList: [],
        isUser: false,
        isRole: false,
        userTitle: "添加用户",
        roleCheckList: [],//当前选中角色ID组
        roleList: [],//角色列表
        currUserIdx: "",
        user: {
          userName: "",//用户名称
          loginName: "",//登录帐号
          pwd: "",//密码
          email: "",//邮箱
          tel: "",//电话号码
          department: "",//所属公司
          authority: "99"//好像是调度相关的
        },
        userState: 1 //1为添加，0为修改
      }
    },
    methods: {
      //查询用户数据
      queryUserList() {
        var params = "param=" + JSON.stringify(this.userSearch),
          that = this;
        this.$http.post("/userList.shtml", params).then(data => {
          console.log(data);
          if (data.code == 200) {
            that.userTotal = data.appendix;
            that.userList = data.data
          }
        })
      },
      //修改每页显示多少条,每次修改将pageNum设置为1
      chagePageSize(pageSize) {
        this.userSearch.pageSize = pageSize
        this.userSearch.pageNum = 1;
        this.queryUserList()
      },
      //页码切换
      changePageNum(pageNum) {
        this.userSearch.pageNum = pageNum
        this.queryUserList()
      },
      //用户状态切换
      userStatusChange(row) {
        var params = "userId=" + row.userId + "&status=" + row.status, that = this;
        this.$http.post("/userStatusChange.shtml", params).then(data => {
          if (data.code == 200) {
            row.status = row.status == "VALID" ?'INVALID' :'VALID'
            that.$notify({
              title: '成功',
              message: data.msg || '状态修改成功',
              type: 'success'
            });
          }
        })
      },
      //用户删除
      delUser(userId) {
        this.$confirm('确认删除该用户吗？', '删除用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(() => {
          var that = this;
          this.$http.post("/delUser.shtml", "userId="+userId).then(data => {
            if (data.code == 200) {
              that.$notify({
                title: '成功',
                message: data.msg || '删除用户成功',
                type: 'success'
              })
              that.queryUserList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除！'
          });
        });
      },
      //显示修改界面
      showModifyUserPanel(user) {
        this.isUser = true
        this.userState = 0
        this.user = user
        this.user.pwd = "";
      },
      //显示用户添加界面
      showAddUserPanel() {
        this.resetUserInfo()
        this.userState = 1
        this.isUser = true
      },
      //重置用户信息
      resetUserInfo() {
        this.user = {
          userName: "",
          loginName: "",
          pwd: "",
          email: "",
          tel: "",
          department: "",
          authority: "99"
        }
      },
      //用户角色信息
      userRoleInfo(userId) {
        var that = this;
        this.currUserIdx = userId
        this.$http.get("/userRoleInfo.shtml", {params: {userId: userId}}).then(data => {
          that.isRole = true
          that.roleCheckList = data.data
        })
      },
      //查询所有角色
      queryRoleList() {
        var that = this;
        this.$http.get("/getRoleList.shtml", {params: this.roleSearch}).then(data => {
          if (data.code == 200) {
            that.roleList = data.data
          } else {
            that.roleList = []
          }
        })
      },
      //修改用户角色
      updateUserRole() {
        var param = "param=" + JSON.stringify({userId: this.currUserIdx, roleIds: this.roleCheckList})
        this.$http.post("/userRelationRole.shtml", param).then(data => {
          console.log(data);
          
          if (data.code == 200) {
            
          }
        })
      }
    },
    components: {
      user
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.queryUserList();
        vm.queryRoleList()
      })
    },
    created() {
      
    }
  }
</script>
<style>
  .user-diaolog .el-dialog {
    width: 500px;
  }
</style>